<template>
    <view class="position">
        <image class="findback" :style="'height:200rpx'" src="https://zaiyiqi-1322608024.cos.ap-nanjing.myqcloud.com/static/img/find/findback.png" mode="aspectFit">
        </image>
        <headers title="选择位置" position="fixed" showback="true" navBackcolor="transparent">
        </headers>
        <view class="position-con">
            <view class="position-con-header">
                <view class="position-con-header-top">
                    <view @click="close()">取消</view>
                    <view @click="confirm()">确定</view>
                </view>
                <view class="position-con-header-bottom">
                    <input v-model="content" type="text" placeholder="搜索地点" placeholder-style="color: #8A8F99;"
                        @confirm="confirm()">
                </view>
            </view>
            <!-- 腾讯地图 显示 -->
            <view class="position-con-map">
                <map id="map" class="map" :show-location="true" :latitude="location.lat" :longitude="location.lng"></map>
            </view>
            <!-- 地址列表 -->
            <view class="position-con-list">
                <view class="position-con-item" v-for="(item, index) in addressList" :key="index" @click="setAddress(item)">
                    <view class="position-con-item-title">{{ item.title }}</view>
                    <view class="position-con-item-desc">{{ item.address }}</view>
                </view>
            </view>
        </view>
    </view>
</template>
<script>
import headers from '@/components/headers/index.vue'
export default {
    // 组件名称
    name: 'demo',
    // 组件参数 接收来自父组件的数据
    props: {},
    // 局部注册的组件,import引入的组件需要注入到对象中才能使用
    components: {
        headers,
    },
    // 组件状态值
    data() {
        return {
            // address: '',
            addressList: [],
            location: {
                lat: '',
                lng: ''
            },
            content: ''
        }
    },
    // 计算属性
    computed: {},
    // 侦听器
    watch: {

    },
    // 组件方法
    methods: {
        // 取消/ 清除返回上一页
        close() {
            this.$Router.back()
        },
        // 选择地址带值返回上一页
        setAddress(item) {
            let pages = getCurrentPages(); //获取所有页面栈实例列表
            let prevPage = pages[pages.length - 2]; //上一页页面实例
            console.log(pages, prevPage, 'prevPageprevPage')
            prevPage.$vm.address = item.title
            prevPage.$vm.positionInfo = item
            prevPage.$vm.getLocation()
            this.close()
        },
        //获取当前位置
        getLocation() {
            let that = this
            uni.getLocation({
                success(res) {
                    // 根据经纬度获取城市
                    uni.request({
                        url: 'https://apis.map.qq.com/ws/geocoder/v1/',
                        data: {
                            location: `${res.latitude},${res.longitude}`,
                            key: 'LNKBZ-7K2K4-FBTUF-F4EDL-DL3CH-T4FDB'
                        },
                        success(res) {
                            that.location = res.data.result.location
                            // that.confirm()
                            console.log(res, 'res', 'https://apis.map.qq.com/ws/geocoder/v1/')
                        }
                    })
                },
                fail(err) {
                    console.log(err, 'err')
                    // that.getList()
                    if (err.errMsg === 'getLocation:fail 频繁调用会增加电量损耗，可考虑使用 wx.onLocationChange 监听地理位置变化') {
                        uni.showToast({
                            title: '请勿频繁定位',
                            icon: 'none'
                        })
                    }
                    if (err.errMsg === 'getLocation:fail auth deny') {
                        // 未授权
                        uni.showToast({
                            title: '无法定位，请重新获取位置信息',
                            icon: 'none'
                        })
                        authDenyCb && authDenyCb()
                        self.isLocated = false
                    }
                    if (err.errMsg === 'getLocation:fail:ERROR_NOCELL&WIFI_LOCATIONSWITCHOFF') {
                        uni.showModal({
                            content: '请开启手机定位服务',
                            showCancel: false
                        })
                    }
                }
            })
        },
        // 确定搜索
        confirm() {
            // https://apis.map.qq.com/ws/place/v1/search?boundary=nearby(40.040589,116.273543,1000)&keyword=公园&page_size=10&page_index=1&key=[你的key]
            // 根据地点搜索
            let that = this
            // that.addressList = [
            //     {
            //         ad_info: {
            //             adcode: 371312,
            //             city: "临沂市",
            //             district: "河东区",
            //             province: "山东省",
            //         },

            //         address: "山东省临沂市河东区华阳路与人民大街交叉口西北280米豪森华府东区",
            //         category: "房产小区:房产小区附属",
            //         id: "875214126409981283",
            //         location: {
            //             lat: 35.085543,
            //             lng: 118.404409,
            //         },
            //         tel: "",
            //         title: "豪森华府东区6幢",
            //         type: 0
            //     },
            //     {
            //         ad_info: {
            //             adcode: 371312,
            //             city: "临沂市",
            //             district: "河东区",
            //             province: "山东省",
            //         },

            //         address: "山东省临沂市河东区华阳路与人民大街交叉口西北280米豪森华府东区",
            //         category: "房产小区:房产小区附属",
            //         id: "875214126409981283",
            //         location: {
            //             lat: 35.085543,
            //             lng: 118.404409,
            //         },
            //         tel: "",
            //         title: "豪森华府东区15幢",
            //         type: 0
            //     },
            //     {
            //         ad_info: {
            //             adcode: 371312,
            //             city: "临沂市",
            //             district: "河东区",
            //             province: "山东省",
            //         },

            //         address: "山东省临沂市河东区华阳路与人民大街交叉口西北280米豪森华府东区",
            //         category: "房产小区:房产小区附属",
            //         id: "875214126409981283",
            //         location: {
            //             lat: 35.085543,
            //             lng: 118.404409,
            //         },
            //         tel: "",
            //         title: "豪森华府东区26幢",
            //         type: 0
            //     },
            //     {
            //         ad_info: {
            //             adcode: 371312,
            //             city: "临沂市",
            //             district: "河东区",
            //             province: "山东省",
            //         },

            //         address: "山东省临沂市河东区华阳路与人民大街交叉口西北280米豪森华府东区",
            //         category: "房产小区:房产小区附属",
            //         id: "875214126409981283",
            //         location: {
            //             lat: 35.085543,
            //             lng: 118.404409,
            //         },
            //         tel: "",
            //         title: "豪森华府东区26幢",
            //         type: 0
            //     },
            // ]
            uni.request({
                url: 'https://apis.map.qq.com/ws/place/v1/search',
                data: {
                    // key: 'LNKBZ-7K2K4-FBTUF-F4EDL-DL3CH-T4FDB',
                    key: 'YROBZ-2N4WV-D6XPD-5HQQA-ME5ZZ-I2FWU', //临时key
                    boundary: `nearby(${this.location.lat},${this.location.lng},1000)`,
                    keyword: this.content,
                    page_size: 40,
                    page_index: 1
                },
                success(res) {
                    that.addressList = res.data.data
                    console.log(res, 'res', 'https://apis.map.qq.com/ws/geocoder/v1/')
                }
            })
        }
    },
    // 以下是生命周期钩子   注：没用到的钩子请自行删除
    /**
     * 在实例初始化之后，组件属性计算之前，如data属性等
     */
    beforeCreate() { },
    /**
     * 组件实例创建完成，属性已绑定，但DOM还未生成，$ el属性还不存在
     */
    created() {
        this.getLocation()
        // this.confirm()
    },
    /**
     * 在挂载开始之前被调用：相关的 render 函数首次被调用。
     */
    beforeMount() { },
    /**
     * el 被新创建的 vm.$ el 替换，并挂载到实例上去之后调用该钩子。
     * 如果 root 实例挂载了一个文档内元素，当 mounted 被调用时 vm.$ el 也在文档内。
     */
    mounted() { },
    /**
     * 数据更新时调用，发生在虚拟 DOM 重新渲染和打补丁之前。
     * 你可以在这个钩子中进一步地更改状态，这不会触发附加的重渲染过程。
     */
    beforeUpdate() { },
    /**
     * 由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子。
     * 当这个钩子被调用时，组件 DOM 已经更新，所以你现在可以执行依赖于 DOM 的操作。
     */
    updated() { },
    /**
     * keep-alive 组件激活时调用。 仅针对keep-alive 组件有效
     */
    activated() { },
    /**
     * keep-alive 组件停用时调用。 仅针对keep-alive 组件有效
     */
    deactivated() { },
    /**
     * 实例销毁之前调用。在这一步，实例仍然完全可用。
     */
    beforeDestroy() { },
    /**
     * Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，
     * 所有的事件监听器会被移除，所有的子实例也会被销毁。
     */
    destroyed() { }
}
</script>

<style scoped lang="scss">
.findback {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 6;
    // background: #FFFFFF;
}

.position {
    padding-top: 120rpx;
    z-index: 7;
    position: relative;

    &-con {
        z-index: 7;
        position: relative;

        &-header {
            padding: 0 32rpx 32rpx;

            &-top {
                padding: 32rpx 0;
                display: flex;
                justify-content: space-between;
                font-size: 32rpx;
                font-family: PingFang SC, PingFang SC;
                font-weight: 400;
                color: #2E3033;
            }

            &-bottom {
                width: 686rpx;
                height: 64rpx;
                background: #F5F5F5;
                border-radius: 32rpx 32rpx 32rpx 32rpx;
                font-size: 28rpx;
                font-family: PingFang SC, PingFang SC;
                font-weight: 400;
                line-height: 64rpx;

                input {
                    text-align: center;
                    height: 100%;
                }
            }
        }

        &-map {
            width: 750rpx;
            height: 560rpx;

            map {
                width: 100%;
                height: 100%;
            }
        }

        &-list {
            padding-bottom: env(safe-area-inset-bottom);
            padding-bottom: constant(safe-area-inset-bottom);
        }

        &-item {
            padding: 32rpx;
            border-bottom: 1rpx solid #F5F5F5;

            &-title {
                font-size: 28rpx;
                font-family: PingFang SC, PingFang SC;
                font-weight: 400;
                color: #2E3033;
                margin-bottom: 16rpx;
            }

            &-desc {
                font-size: 24rpx;
                font-family: PingFang SC, PingFang SC;
                font-weight: 400;
                color: #737980;
            }
        }

        &-item:last-child {
            border-bottom: 0 !important;
        }
    }
}
</style>